<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<!--<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>-->
		<script type='text/javascript' src='./vue.js'></script>
		<!--<link rel='stylesheet' type='text/css' href=''>-->
		<style type='text/css'>
			.active {
				color: red;
			}
		</style>


	</head>
	<body>
		<div id="d">
			<h2 :style="{fontSize:'41px'}">1111</h2>
			<div v-for="(item,index) in data1">
				<input type='radio' name="intresting" v-model="data1val" :checked="item.selected" :value="item.name" :id="item.name"><label :for="item.name">{{item.name}}</label>
			</div>
			data1val:{{data1val}}
			<div v-for="(item,index) in data2">
				<input type='checkbox' :name="item.name" v-model="data2val" :checked="item.selected" :value="item.name" :id="item.id"><label :for="item.id">{{item.name}}</label>
			</div>
			data2val:{{data2val}}
		</div>
		<script>
			let app = new Vue({
				el: '#d',
				data: function() {
					return {
						data1: [{
							'name': '张三',
							'selected': 'selected'
						},{
							'name': '李四',
							'selected': ''
						}],
						data1val: [],
						data2: [{
							'id':1,
							'name': '张三',
							'selected': 'checked'
						},{
							'id':2,
							'name': '李四',
							'selected': ''
						}],
						data2val: [],
					}
				},
				methods: {
					changeindex: function(index) {
						this.theindex = index;
					}

				}

			});
		</script>
	</body>
</html>
